$line-height: 30rem;

.context-menu {

    --widget-padding: 0rem;
    --alpha-fill: 1;

    position:fixed;
    z-index: 9999999;
    background: var(--color-context-menu);
    box-shadow: 0 0 0 0.5rem rgba(0, 0, 0, 0.15) inset;
    text-transform: none;
    color: var(--color-context-menu-text);
    font-weight: 500;
    font-size: 13rem;
    line-height: $line-height;
    font-family: $font-menu;
    letter-spacing: normal;
    padding-top: 3rem;
    padding-bottom: 3rem;

    .context-menu {
        position: absolute;
        left:100%;
        top:-3rem;
        opacity:0;
        pointer-events: none;
        margin-left: -1rem;
        &:before {
            content:"";
            position: absolute;
            top:0;
            bottom:0;
            left:-2rem;
            width:2rem;
        }
    }
    > .item {
        padding-left: 30rem;
        padding-right: 30rem;
        position:relative;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        i {
            position: absolute;
            left: 10rem;
            width: 10rem;
            text-align: center;
            line-height: $line-height - 2;
            font-size: 9rem;
            pointer-events: none;
        }
        &.focus {
            > .context-menu {
                pointer-events: auto;
                opacity: 1;
            }
            @include pseudo-fill($z: -1);
            color: var(--color-context-menu);
        }
        &.has-sub:before {
            content:"\f105";
            display: block;
            font-family: FontAwesome;
            text-align: right;
            margin-right: -20rem;
            position: relative;
            flex: 1;
            order: 1;
            margin-left: 10rem;
        }
        &.disabled {
            pointer-events: none;
            opacity: 0.5;
        }
        &.toggle:before  {
            content: "";
            display: block;
            font-family: FontAwesome;
            position: absolute;
            width: 10rem;
            height: 10rem;
            left: 10rem;
            top: 8rem;
            border: 1rem solid;
            opacity: 0.75;
            line-height: 10rem;
            font-size: 8rem;
            text-align: right;
        }
        &.toggle.on:before {
            content:"\f00c";
        }
        .shortcut {
            display: inline-block;
            margin-left: 20rem;
            margin-right: -20rem;
            position: relative;
            text-align: right;
            position: relative;
            flex: 1;
            text-transform: capitalize;
            opacity: 0.5;
            pointer-events: none;
        }
    }
    .separator{
        margin: 2rem 1rem;
        height: 1rem;
        background-color: var(--color-context-menu-text);
        opacity: 0.15;
    }
}
